<template>
	<view class="main-page">
		<view class="title-wrapper">
			<view class="title">AI童话绘本</view>
			<view class="subtitle">输入关键词，创作专属童话</view>
		</view>
		<view class="input-wrapper">
			<uv-textarea v-model="prompt" placeholder="输入你想要的童话主题..." :maxlength="200"></uv-textarea>
		</view>
		<view class="quick-tips-wrapper">
			<view class="title">
				快捷提示词
			</view>
			<view class="button-list">
				<view v-for="item in tipButtonList" :key="item.name" class="tip-button"
					:style="'background-color:' + item.color" @click="handleClickTipButton(item.name)">
					<image :src="'../../static/' + item.icon + '.png'" />
					<view class="name">{{ item.name }}</view>
				</view>
			</view>
		</view>

		<view class="start-button" @click="handleStart">
			开始阅读
			<uv-icon name="arrow-right" color="#fff" size="16" top="1"></uv-icon>
		</view>

		<!-- Tabbar -->
		<Tabbar :active="0"></Tabbar>
	</view>
</template>

<script>
import request from '@/api/http.js';

export default {
	data() {
		return {
			prompt: '', // AI提示词（输入框内容）
			tipButtonList: [
				{
					name: '女巫',
					color: '#f3e5f5',
					icon: 'icon-witch'
				},
				{
					name: '精灵',
					color: '#e8f5e9',
					icon: 'icon-elf'
				},
				{
					name: '公主',
					color: '#e3f2fd',
					icon: 'icon-princess'
				},
				{
					name: '魔法',
					color: '#fce4ec',
					icon: 'icon-magic'
				},
				{
					name: '骑士',
					color: '#fff3e0',
					icon: 'icon-knight'
				},
				{
					name: '龙',
					color: '#ffebee',
					icon: 'icon-dragon'
				}
			]
		}
	},
	onLoad() {

	},
	methods: {
		async handleStart() {
			// let res = await request(`/story/uploadPrompt`, {
			// 	prompt: 'hello'
			// }, 'POST');
			// console.log(res.data);


			uni.navigateTo({
				url: '/pages/book/book'
			})
		},
		handleClickTipButton(name) {
			this.prompt += name + ' ';
		}
	}
}
</script>

<style lang="scss">
.main-page {
	padding: 20px;

	.title-wrapper {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 20px;

		.title {
			font-size: 24px;
			font-weight: bold;
			width: max-content;
			background-image: linear-gradient(to right, #7B4DFF, #FF4D8C);
			-webkit-background-clip: text;
			color: transparent;
		}

		.subtitle {
			font-size: 16px;
			color: #4B5563;
		}
	}

	.input-wrapper {
		margin-bottom: 20px;

		.uv-textarea {
			border: 1px #f4f5f7 solid;
			border-radius: 25rpx;
			height: 250rpx;
		}
	}

	.quick-tips-wrapper {
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.title {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}

		.button-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;

			.tip-button {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 25rpx;
				padding: 40rpx 20rpx;
				color: #333;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 10rpx;
				}

				.name {
					font-size: 12px;
				}
			}
		}
	}

	.start-button {
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: linear-gradient(to right, #7B4DFF, #FF4D8C);
		color: #fff;
		border-radius: 233rpx;
		padding: 30rpx 0;
		margin-top: 50rpx;
		text-align: center;
		font-size: 32rpx;
		letter-spacing: 0.1em;
	}
}
</style>
